<template>
  <van-popup v-model="visible" position="bottom" closeable>
    <van-list v-model="loading" :finished="!loading">
      <van-cell v-for="(item, index) in data" :key="item.Id" icon="label-o">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span>{{ getNum(index) }}.{{ item.LogContent }} </span>
        </template>
        <!-- 	自定义标题下方 label 的内容 -->
        <template #label>
          <span>{{ item.CreateTime }}</span>
        </template>
      </van-cell>
    </van-list>
    <van-pagination
      v-model="pagination.current"
      :total-items="pagination.total"
      :show-page-size="pagination.pageSize"
      @change="getData"
    >
      <template #prev-text>
        <van-icon name="arrow-left" />
      </template>
      <template #next-text>
        <van-icon name="arrow" />
      </template>
      <template #page="{ text }">{{ text }}</template>
    </van-pagination>
  </van-popup>
</template>

<script>
import { Base_UserLog_GetLogList } from "@/api/Base_Manage/Base_UserLog";

export default {
  props: {
    afterSubmit: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      visible: false,
      loading: false,
      data: [],
      pagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "50", "100", "200", "500", "1000"],
        showTotal: (total, range) =>
          `总数:${total} 当前:${range[0]}-${range[1]}`
      },
      filters: {},
      sorter: { field: "Id", order: "asc" },
      queryParam: {}
    };
  },
  methods: {
    openForm(fullname) {
      this.visible = true;

      //组件初始化
      this.init(fullname);

      this.$nextTick(() => {
        this.getData();
      });
    },
    init(fullname) {
      this.data = [];
      this.visible = true;
      this.queryParam.data = fullname;
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
    },
    getData() {
      this.loading = true;
      Base_UserLog_GetLogList({
        PageIndex: this.pagination.current,
        PageRows: this.pagination.pageSize,
        SortField: "CreateTime",
        SortType: "desc",
        ...this.queryParam,
        ...this.filters
      }).then(resJson => {
        this.loading = false;
        this.data = resJson.Data;
        const pagination = { ...this.pagination };
        pagination.total = resJson.Total;
        this.pagination = pagination;
      });
    },
    getNum(index) {
      return (
        (this.pagination.current - 1) * this.pagination.pageSize + index + 1
      );
    }
  }
};
</script>
